<template>
  <ul v-if="todos.length > 0">
    <li class="clear">
      <div class="left">
        <div
          :class="{ chose: true, selected: doneAll }"
          @click="selectAllToDone"
        ></div>
        <span>{{ res }}</span>
      </div>
      <div>
        <button class="clear-done" @click="clearDone">清除已办</button>
        <button class="clear-all" @click="clearAll">清除所有</button>
      </div>
    </li>
  </ul>
  <h1 v-else>{{ res }}</h1>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  todos: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits =defineEmits(['selectAllToDone','clearDone','clearAll']);
const doneAll = ref(false);

const res = computed(() => {
  if (props.todos.length > 0) {
    //已办事项的个数
    let count = 0;
    props.todos.forEach((todo) => {
      if (todo.done) {
        count++;
      }
    });
    if (count == props.todos.length) {
      doneAll.value = true;
    } else {
      doneAll.value = false;
    }
    return `已办事项${count}/全部事项${props.todos.length}`;
  } else {
    return `暂无待办事项`;
  }
});

//将所有的变为true
const selectAllToDone = ()=>{
  emits("selectAllToDone",!doneAll.value);
}
//清除所有已办
const clearDone = ()=>{
  emits("clearDone");
}

//清除所有
const clearAll = ()=>{
  emits("clearAll");
}
</script>

<style scoped>
ul {
  width: 100%;
}
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 40px;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}
li .left {
  display: flex;
}
.clear {
  background-color: #87ceeb;
}
.clear:hover {
  background-color: #87ceeb;
}
li .left .chose {
  margin-right: 30px;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 2px;
}
.clear button {
  width: 80px;
}
.clear .clear-done {
  margin-right: 20px;
}

.done {
  color: red;
  text-decoration: line-through red;
}
h1 {
  margin-top: 10px;
  text-align: center;
  background-color: white;
  border-bottom: none;
}
.selected {
  background-color: #767676;
}
.selected::before {
  content: ""; /* Unicode character for tick */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: 4px solid white;
  border-left: none;
  border-top: none;
  display: block;
}
</style>